<template>
    <div class="pie-box">
      <div ref="pieBar" class="echarts" style="height: 100%"></div>
      <div class="pie-legend">
        <div v-for="(item, index) in data" :key="item.name" class="pie-info">
          <div
            class="legend-color"
            :style="{ background: colorList[index][0].color }"
          ></div>
          <label>{{ item.name }}：</label>
          <span :style="{ color: colorList[index][0].color }">{{
            item.value
          }}</span>
        </div>
        <div class="pie-info">
          <div
            class="legend-color"
            :style="{ background: colorList[2][0].color }"
          ></div>
          <label>总计：</label>
          <span :style="{ color: colorList[2][0].color }">123</span>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "PieiBar",
    components: {},
    props: {
      oneUnit: {
        type: String,
        default: ""
      },
      rotate: {
        type: Number,
        default: 0
      },
      barWidth: {
        type: Number,
        default: 15
      },
      unitArr: {
        type: Array,
        default: () => {
          return [];
        }
      },
      xAxisData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      data: {
        type: Array,
        default: () => {
          return [
            {
              value: 10,
              name: "在航数",
              itemStyle: {
                color: "rgba(39,61,78,1)"
              }
            },
            {
              value: 15,
              name: "停航数",
              itemStyle: {
                color: "rgba(39,61,78,1)"
              }
            }
          ];
        }
      },
      title: {
        type: String,
        default: "社会船舶统计"
      },
      subtext: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        legendData: [],
        seriesData: [],
        colorList: [
          [
            { offset: 0, color: "#407FFF" },
            { offset: 1, color: "#70ADFF" }
          ],
          [
            { offset: 0, color: "#F69D33" },
            { offset: 1, color: "#F9BD75" }
          ],
          [
            { offset: 0, color: "#3BEB75" },
            { offset: 1, color: "#C4FCD6" }
          ],
          [
            { offset: 0, color: "#40D8F9" },
            { offset: 1, color: "#A0FCFF" }
          ],
          [
            { offset: 0, color: "#2097FC" },
            { offset: 1, color: "#4EBAFF" }
          ]
        ]
      };
    },
    computed: {},
    watch: {
      data: {
        handler: function (val, oldVal) {
          this.legendData = [];
          this.seriesData = [];
          setTimeout(() => {
            this.init();
          }, 200);
        },
        // 深度观察监听
        deep: true,
        immediate: true
      }
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
      init() {
        const that = this;
        const myEcharts = echarts.init(this.$refs["pieBar"]);
        const option = {
          title: {
            text: this.title,
            subtext: this.subtext,
            x: "0",
            y: "0%",
            textStyle: {
              color: "#fff",
              fontSize: 16,
              fontWeight: 600,
              width: "200px"
            },
            subtextStyle: {
              color: "#ddd",
              fontSize: 14,
              fontWeight: "normal",
              align: "center"
            }
          },
  
          tooltip: {
            confine: true,
            trigger: "item",
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff"
              }
            },
            formatter: function (value) {
              return value.marker + value.data.name + "：" + value.data.value;
            }
          },
          series: [
            {
              name: "2层",
              type: "pie",
              selectedMode: "single",
              selectedOffset: 15,
              radius: ["0%", "70%"],
              center: ["30%", "60%"],
              labelLine: {
                show: false,
                lineStyle: {
                  width: 3
                },
                normal: {
                  length: 20, // 指示线长度
                  length2: 60
                }
              },
              label: {
                // position: 'inner',
                color: "#FFF",
                formatter: "{b}",
                fontSize: "20",
                show: false
              },
              color: ["#FFDC44", "#5AFFDF", "#5AFFDF"],
  
              data: that.data.map((o, index) => {
                o.itemStyle = {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    this.colorList[index]
                  ) //"rgba(39,61,78,1)"
                };
                return o;
              })
            }
          ]
        };
  
        myEcharts.setOption(option);
        myEcharts.resize();
        myEcharts.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0
        });
      }
    }
  };
  </script>
  <style lang="less" scoped>
  .pie-box {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }
  .echarts {
    width: 100%;
  }
  .pie-legend {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(0, -50%);
    color: #fff;
    padding-top: 20px;
    .pie-info {
      width: 100%;
      padding: 5px;
      text-align: left;
    }
    .legend-color {
      width: 12px;
      height: 12px;
      display: inline-block;
      background: #fff;
      vertical-align: middle;
      margin-right: 5px;
    }
    label,
    span {
      padding-right: 5px;
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
    }
    span {
      font-size: 24px;
      font-family: "YouSheBiaoTiHei";
    }
  }
  </style>
  